{% extends "personal_center/base.html" %}
{% load state_display %}

{% block page_link %}
    <link rel="stylesheet" href="../../static/system_setup/css/style.css">
    <link rel="stylesheet" type="text/css" href="../../static/personal_center/css/index.css">
    <script type="text/javascript" src="../../static/personal_center/js/index.js"></script>
    <link rel="stylesheet" href="../../static/forum/jqueryDatePicker/font_file.css">
    <link rel="stylesheet" href="../../static/forum/jqueryDatePicker/index.css">
{% endblock %}


{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }
        .tab_top {
            height: 40px;text-align: center;display: inline-block;cursor: pointer;padding-top: 5px;padding-left: 2%;
        }
        tr th {
            background-color: #f2f3f1;
        }
        option {
            font-size: 14px;
        }
        .shade {
            position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(36, 36, 36, 0.5);display: none;z-index: 10000;
        }
        .cancellation {
            width: 200px;height: 35px;border: #F5F5F5 solid 1px;background: #F5F5F5;letter-spacing: 7px;text-align: center;
        }
        .cancellation:hover {
            background: #cfcfcf;
        }
        .confirm-leval {
            width: 200px;height: 35px;border: #2db7f5 solid 1px;background: #2db7f5;letter-spacing: 7px;text-align: center;margin-left: 10px;color: white;
        }
        .confirm-leval:hover {
            background: #0c6fd9;
        }
        .search-action {
            width: 100px;height: 30px;border-radius: 3px;background: #2db7f5;border: #2db7f5 solid 1px;color: white;letter-spacing: 6px;float: right;font-size: 14px;margin-top: 2.5px;
        }
    </style>
{% endblock %}


{% block right_content %}
    <div style="width: 100%;height: 100%;background: white;">
        <div class="headline" style="border-bottom: #cfcfcf solid 1px;">
            <div style="width: 100%;height: 40px;font-size: 0;padding-right: 15px;padding-top: 2.5px;">
                <div style="width: 150px;height: 35px;font-size: 14px;text-align: center;float: left;line-height: 30px;cursor: pointer;" onclick="window.location.href='/medical-ethics/TopicRegistrationExport.html'">
                    议题登记
                </div>
                <div style="width: 150px;height: 35px;border-bottom: #0d8ddb solid 2px;font-size: 14px;text-align: center;float: left;line-height: 30px;color: #0d8ddb;cursor: pointer;" onclick="window.location.href='/medical-ethics/SummaryOfficialDocuments.html'">
                    公文汇总
                </div>

                <button onclick="search_func()" class="search-action">
                    搜索
                </button>
                <div style="height: 30px;margin-left: 20px;font-size: 14px;float: right;margin-right: 5px;">
                    <select style="border-color: #66b1ff;border-radius: 3px;outline: none;width: 250px;margin-top: 2.5px;height: 30px;" name="" id="search_year">
                        <option value="0">请选择搜索年份</option>
                        {% for foo in year_list %}
                            <option value="{{ foo }}" {% if search_year == foo %}selected{% endif %} >{{ foo }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
        </div>

        <div id="my_application" style="width: 100%;height: 95.3%;overflow: auto;background-color: white;">
            <div class="right-box" style="width: 100%;height: 100%;margin-top: 0;">
                <div style="height: 100%;width: 100%;border-bottom: #cccccc solid 1px;background-color: white;padding-top: 3%;padding-bottom: 3%;">
                    <div style="height: 97%;width: 90%;margin-left: 5%;box-shadow: 5px 5px 10px rgba(0,0,0,0.5);border: #cfcfcf 1px solid;">
                        <div style="width: 100%;height: 40px;border-bottom: #cfcfcf solid 1px;text-align: center;letter-spacing: 3px;font-size: 20px;line-height: 40px;">
                            <strong>{{ search_year }}年京医党发文件汇总</strong>
                        </div>
                        <div style="width: 100%;height: 40px;border-bottom: #cfcfcf solid 1px;">
                            <div style="width: 5%;height: 100%;text-align: center;border-right: #cfcfcf solid 1px;display: inline-block;vertical-align: top;line-height: 40px;">序号</div>
                            <div style="width: 60%;height: 100%;text-align: center;border-right: #cfcfcf solid 1px;display: inline-block;vertical-align: top;line-height: 40px;">标题</div>
                            <div style="width: 33%;height: 100%;text-align: center;display: inline-block;vertical-align: top;line-height: 40px;">公文编号</div>
                        </div>
                        <div style="width: 100%;height: 83.5%;overflow: auto;">
                            {% for doct in document_list %}
                                <div style="width: 100%;height: 40px;border-bottom: #cfcfcf solid 1px;">
                                    <div style="width: 5%;height: 100%;text-align: center;border-right: #cfcfcf solid 1px;display: inline-block;vertical-align: top;line-height: 40px;">{{ doct.serial }}</div>
                                    <div style="width: 60%;height: 100%;border-right: #cfcfcf solid 1px;display: inline-block;vertical-align: top;line-height: 40px;"><a href="/personal-center/document_detail.html?id={{ doct.id }}">{{ doct.title }}</a></div>
                                    <div style="width: 33%;height: 100%;text-align: center;display: inline-block;vertical-align: top;line-height: 40px;">{{ doct.number }}</div>
                                </div>
                            {% endfor %}
                        </div>
                        <div onclick="doload_fun()" style="width: 100%;height: 38px;background: #F5F5F5;cursor: pointer;color: #3A5FCD;letter-spacing: 15px;text-align: center;line-height: 38px;font-size: 18px;">
                            下载
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script src="../../static/personnel/js/jquery-1.11.1.min.js"></script>
    <script src="../../static/forum/jqueryDatePicker/moment.js"></script>
    <script src="../../static/forum/jqueryDatePicker/datePicker.min.js"></script>
    <script src="../../static/administrative/layDate-v5.0.9/laydate/laydate.js"></script> <!-- 改成你的路径 -->
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("personage").className = "add_class";
            document.getElementById("sponsor").className = "add-nav-active";
        };

        function search_func() {
            var search_year = document.getElementById("search_year").value;
            window.location.href = "/medical-ethics/SummaryOfficialDocuments.html?search_year="+search_year;
        }

        function doload_fun() {
            var form = new FormData();
            var search_year = document.getElementById("search_year").value;
            form.append('search_year', search_year);
            document.getElementById("loading").style.display = "inline-block";
            var xhr = new XMLHttpRequest();
            xhr.open('post', "/medical-ethics/SummaryOfficialDocuments.html", true);
            xhr.send(form);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        console.log(JsonDate);
                        if (JsonDate['code'] === 200) {
                            window.location.href = JsonDate["file_path"];
                            alert("下载成功！");
                            window.location.reload();
                        } else {
                            alert(JsonDate['message'])
                        }

                    }
                }
            }
        }
    </script>
{% endblock %}
